<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>
	<body>
	<div id="app">
		<div v-if="isLogin">
			<div >
				<input v-model="name" placeholder="请输入学生姓名"/>
				<input v-model="sex" placeholder="请输入学生性别"/>
				<input v-model="classId" type="number" placeholder="请输入学生班级ID"/>
				<button @click="insert()">插入学生信息</button>
			</div>
			<div>
				<input v-model="searchName" placeholder="请输入模糊查询学生姓名"/>
				<input v-model="age" placeholder="根据年龄查询"/>
				<button @click="getList()">查询</button>
			</div>
			<div>
				<div style="display: flex;flex-direction: row;">
					<div style="width: 100px;">ID</div>
					<div style="width: 100px;">头像</div>
					<div style="width: 100px;">姓名</div>
					<div style="width: 100px;">性别</div>
					<div style="width: 100px;">年龄</div>
					<div style="width: 100px;">民族</div>
					<div style="width: 100px;">班级ID</div>
				</div>
				<div v-for="item in list" style="display: flex;flex-direction: row;align-items: center">
					<div style="width: 100px;">{{item.id}}</div>
					<div style="width: 100px;">
						<img :src="item.touxiang" style="width: 50px;height: 50px"
							 @click="choose(item.id)"/>
						<input type="file" multiple accept="image/jpeg,image/png" :data-id="item.id"
							   style="visibility: hidden" :id="item.id" @change="handleChoose">
					</div>
					<input style="width: 100px;" v-model="item.name"/>
					<div style="width: 100px;">{{item.sex}}</div>
					<div style="width: 100px;">{{item.age}}</div>
					<div style="width: 100px;">{{item.classId}}</div>
					<div style="width: 100px;">{{item.minzu}}</div>
					<button @click="updates(item.id,item.name)">更新</button>
					<button @click="deletes(item.id)">删除</button>
				</div>
			</div>

		</div>
		<div v-if="!isLogin">
			<h1>欢迎访问学生管理系统</h1>
			<input v-model="username" placeholder="请输入用户名"/>
			<input v-model="password" placeholder="请输入密码"/>
			<button @click="login()">登录</button>
		</div>
	</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					name: '',
					sex: '',
					classId: '',
					searchName: '',
					age:'',
					list: [],
					username:'',
					password:"",
					token:""
				},
				//页面初始化调用
				mounted() {
					this.getList() //获取所有学生信息
				},
				methods: {
					insert() {
						axios
							//填写接口地址，参数用字符拼接起来
								.get('http://localhost:8080/student/insertJpa?name=' + this.name + '&sex=' + this.sex + '&classId=' + this.classId,
										{
											headers:{"token":this.token}
										})
							.then(response => {
								alert(response.data)
								//添加完成后清空输入框	
								this.name = ''
								this.sex = ''
								this.classId = ''
								//添加完成后刷新列表
								this.getList()
							})

					},
					getList() {
						var age = 0;

						if(this.age!=""){
							age  = this.age;
						}
						//获取学生信息
						axios
							.get('http://localhost:8080/findAllJpaByName?name='+this.searchName+'&age='+age,{
								headers:{"token":this.token}
							})
							.then(response => {
								this.list = response.data
							})
					},
					deletes(id) {
						axios
							.get('http://localhost:8080/deleteJpa?id=' + id,{
								headers:{"token":this.token}
							})
							.then(response => {
								alert(response.data)
								//删除完成后刷新列表
								this.getList()
							})
					},
					updates(id,newName) {
						axios
							.get('http://localhost:8080/updateJpa?id=' + id+'&name='+newName,{
								headers:{"token":this.token}
							})
							.then(response => {
								alert(response.data)
								//更新完成后刷新列表
								this.getList()
							})
					},
					choose(id){
						let  input=document.getElementById(id);
						input.click()
					},
					handleChoose(e){
						let file =e.target.files.item(0);
						let date =new FormData();
						date.append("file",file);
						date.append("id",e.target.dataset.id)
						axios
								.post('http://localhost:8080/uploadFile',date,{headers:{"token":this.token}})
								.then(response => {
									alert(response.data)
									//更新完成后刷新列表
									this.getList()
								})
					},
					login(){
						let data = new FormData();
						data.append("user",this.username);
						data.append("pwd",this.password)
						axios
								.post('http://localhost:8080/noLogin/login', data, {
									headers:{"token":this.token}
								})
								.then(response => {//返回的结果
									if(response.data==""){
										alert("用户名和密码错误")
									}else {
										//调用登录接口，模拟登陆
										this.isLogin = true;
										this.token = response.data//随便给token赋值，实际开发，是的调用登陆接口之后，token是接口返回的
										this.getList()
									}

								})
					}
				}
			})
		</script>
	</body>
</html>
